<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>淘宝网</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="usernav-wrapper">
        <div class="usernav-content">
            <ul class="usernav-content-left">
                <li>
                    <div class="usernm">
                        <a class="nm" href="">GuoJiaxing</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="usermsg">
                        <span class="message"></span>
                        <a class="msg" href="">消息</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="othermsg">
                        <a class="gtb" href="">手机逛淘宝</a>
                    </div>
                </li>
            </ul>
            <ul class="usernav-content-right">
                <li>
                    <div class="content1">
                        <a href="">我的淘宝</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="content2">
                        <span class="shoppingcar"></span>
                        <a href="">购物车</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="content3">
                        <span class="star"></span>
                        <a href="">收藏夹</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="content4">
                        <a href="">商品分类</a>
                        <span></span>
                    </div>
                </li>
                <li class="line">|</li>
                <li>
                    <div class="content5">
                        <a href="">卖家中心</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="content6">
                        <a href="">联系客服</a>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div class="content7">
                        <span class="list"></span>
                        <a href="">网站导航</a>
                        <span></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="taobao_body" style="border: 1px solid red;">
        <div class="head">
            <div class="head-search">
                <div class="search-head">
                    <ul>
                        <li><a class="choosen" href="">淘宝</a></li>
                        <li><a href="">天猫</a></li>
                        <li><a href="">店铺</a></li>
                    </ul>
                </div>
                <div class="search-box">
                    <form action="">
                        <input class="content" type="text" name="search" />
                        <button class="submit" type="submit"></button>
                    </form>
                </div>
                <div class="searchfoot-nav">
                    <a href="">毛呢外套</a>
                    <a href="">新款毛衣</a>
                    <a href="">连衣裙</a>
                    <a href="">时尚单鞋</a>
                    <a href="">新款风衣</a>
                    <a href="">女士衬衫</a>
                    <a href="">流行男鞋</a>
                    <a href="">时尚女包</a>
                    <a href="">充电宝</a>
                    <a href="">保温杯</a>
                    <a href="">打底裤</a>
                    <a href="">妈妈装</a>
                    <a href="">打底衫</a>
                    <span class="formore">更多</span>
                </div>
            </div>
            <div class="head-logo">
                <a href="">
					淘宝网
				</a>
            </div>
            <div class="head-code">
                <a href="">
					<span class="h">手机逛淘宝</span>
					<img src="img/QRcode.png" alt="手机逛淘宝">
				</a>
            </div>
            <a href="" class="superSearch">高级搜索</a>
        </div>
        <div class="tradeNav">
            <div class="main">
                <div class="cont">
                    <div class="nav1">
                        <ul class="type1">
                            <li><a href="">天猫</a></li>
                            <li><a href="">聚划算</a></li>
                            <li><a href="">天猫超市</a></li>
                        </ul>
                        <ul class="type2">
                            <li class="pipe">|</li>
                            <li><a href="">淘抢购</a></li>
                            <li><a href="">电器城</a></li>
                            <li><a href="">司法拍卖</a></li>
                            <li><a href="">中国质造</a></li>
                            <li><a href="">兴农扶贫</a></li>
                        </ul>
                        <ul class="type3">
                            <li class="pipe">|</li>
                            <li><a href="">飞猪旅行</a></li>
                            <li><a href="">智能生活</a></li>
                            <li><a href="">苏宁易购</a></li>
                        </ul>
                    </div>
                    <div class="pic1">
                        <div class="first">
                            <img src="img/pic1-1.jpg" alt="">
                        </div>
                        <div class="second">
                            <img src="img/pic2-1.jpg" alt="">
                            <img src="img/pic2-2.jpg" alt="">
                            <img src="img/pic2-3.jpg" alt="">
                            <img src="img/pic2-4.jpg" alt="">
                        </div>
                    </div>
                    <div class="pic2">
                        <div class="first">
                            <img src="img/pic3-1.jpg" alt="">
                        </div>
                        <div class="second">
                            <img src="img/pic3-2.jpg" alt="">
                        </div>
                    </div>
                    <div class="indi">
                        <div class="indi-nav">
                            <ul class="fir-nav">
                                <li class="selected"><a href="">公告</a></li>
                                <li><a href="">规则</a></li>
                                <li><a href="">安全</a></li>
                                <li><a href="">论坛</a></li>
                                <li><a href="">公益</a></li>
                            </ul>
                            <ul class="cont-nav">
                                <li><a href="">阿里全面封杀"樱花"</a></li>
                                <li><a href="">阿里全面进军智能领域</a></li>
                                <li><a href="">星缘守护关爱自闭儿童</a></li>
                                <li><a href="">随心所选只要最心动的</a></li>
                            </ul>
                        </div>
                        <div class="indi-info">
                            <div class="wrapper">
                                <a href="" class="info1">
                					<img src="img/head.jpg" alt="">
                					<br>
                					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                					<strong class="user">GuoJiaxing</strong>
                				</a>
                                <p class="info2">
                                    <a href="">
                						<span class="icon"></span>
                					领淘金币抵钱
                					</a>
                                    <a href="">
										<span class="icon1"></span>
                					会员俱乐部
                					</a>
                                </p>
                            </div>
                        </div>
                        <div class="wrapper2">
                            <div class="cont2">
                                <a href="">登录</a>
                                <a href="">免费注册</a>
                                <a href="">免费开店</a>
                            </div>
                        </div>
                        <div class="indi-cont">
                            <div class="tit">
                                <h3>便民服务</h3>
                            </div>
                            <div class="cont3">
                                <a href="#" >
                                	<span class="logo-1"></span>
                                	<p>话费</p>
                                </a>
                                <a href="#" >
                                	<span class="logo-2"></span>
                                	<p>游戏</p>
                                </a>
                                <a href="#" >
									<span class="logo-3"></span>
                                	<p>旅行</p>
                                </a>
                                <a href="#" >
									<span class="logo-4"></span>
                                	<p>保险</p>
                                </a>
                                <a href="#" >
									<span class="logo-5"></span>
                                	<p>彩票</p>
                                </a>
                                <a href="#" >
									<span class="logo-6"></span>
                                	<p>电影票</p>
                                </a>
                                <a href="#" >
									<span class="logo-7"></span>
                                	<p>点外卖</p>
                                </a>
                                <a href="#" >
                                	<span class="logo-8"></span>
                                	<p>理财</p>
                                </a>
                                <a href="#" >
									<span class="logo-9"></span>
                                	<p>找服务</p>
                                </a>
                                <a href="#" >
									<span class="logo-10"></span>
                                	<p>音乐</p>
                                </a>
                                <a href="#" >
									<span class="logo-11"></span>
                                	<p>水电煤</p>
                                </a>
                                <a href="#" >
                                	<span class="logo-12"></span>
                                	<p>火车票</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="serve">
            	<div class="wrapper">
            		<h2>
            			<span class="ser-logo">淘宝特色服务</span>
            		</h2>

            		<dl>
            			<dt>
            				<span class="fir-logo"></span>
            				主题市场
            			</dt>
            			<dd>
            				<a href="" class="c1">淘宝女人</a>
            				<a href="" class="c2">运动派</a>
            				<a href="" class="c3">情 侣</a>
            				<a href="" class="c1">淘宝男人</a>
            				<a href="" class="c2">孕婴童</a>
            				<a href="" class="c3">家 居</a>
            				<a href="" class="c1">美容护肤</a>
            				<a href="" class="c2">中老年</a>
            				<a href="" class="c3">美 食</a>
            				<a href="" class="c1">海外直购</a>
            				<a href="" class="c2">有车族</a>
            				<a href="" class="c3">装 修</a>
            				<a href="" class="c1">手机数码</a>
            				<a href="" class="c2">生活家</a>
            				<a href="" class="c3">游 戏</a>
            			</dd>

            			<dt>
            				<span class="sec-logo"></span>
            				特色购物
            			</dt>
            			<dd>
            				<a href="" class="c1">淘宝二手</a>
            				<a href="" class="c2">拍卖会</a>
            				<a href="" class="c3">爱逛街</a>

            				<a href="" class="c1">淘宝奇葩</a>
            				<a href="" class="c2">全球购</a>
            				<a href="" class="c3">挑 食</a>

            				<a href="" class="c1">淘宝同学</a>
            				<a href="" class="c2">淘女郎</a>
            				<a href="" class="c3">星 店</a>

            				<a href="" class="c1">淘宝众筹</a>
            				<a href="" class="c2">B 格</a>
            				<a href="" class="c3">动 漫</a>

            				<a href="" class="c1">生活服务</a>
            				<a href="" class="c2">逛搭配</a>
            				<a href="" class="c3">腔 调</a>
            				<a href="" class="c1">淘宝达人</a>
            			</dd>

            			<dt>
            				<span class="thr-logo"></span>
            				优惠促销
            			</dt>
            			<dd>
            				<a href="" class="c1">天天特价</a>
            				<a href="" class="c2">免费试用</a>
            				<a href="" class="c3">清 仓</a>

            				<a href="" class="c1">一元起拍</a>
            				<a href="" class="c2">淘金币</a>
            				<a href="" class="c3">夜抢购</a>
            			</dd>

            			<dt>
            				<span class="fth-logo"></span>
            				工具
            			</dt>
            			<dd>
            				<a href="" class="c1">阿里旺旺</a>
            				<a href="" class="c2">支付宝</a>
            				<a href="" class="c3">来往</a>
            			</dd>
            		</dl>

            	</div>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>